import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
import { Checkbox } from "antd-mobile";

const WorkflowStep = props => {
    const { isOneSelect, noPass, nodeList, handleCheckAllChange, changeUser } = props;

    return (
        <div className="step-wrapper c-fl-c">
            <div className="c-form-label">
                <h4>工作流节点一览</h4>
                {noPass && (
                    <p className="errorTip">
                        {isOneSelect
                            ? "当前配置为自选流程,每个审核节点至少选1人！"
                            : "工作流配置有问题，请联系管理员！"}
                    </p>
                )}
                {isOneSelect && !noPass && (
                    <p className="errorTip">当前配置为自选流程,每个审核节点至少选1人！</p>
                )}
            </div>
            {nodeList.length > 0 && (
                <div className="step-wrapper__content">
                    <ul className="step-nodes">
                        {nodeList.map((item, idx) => {
                            return (
                                <li className="step-node" key={idx}>
                                    <div className="step-nodes-title">
                                        <div className="title-order">{idx + 1}</div>
                                        <div className="title-name">{item.nodeName}</div>
                                    </div>
                                    <div className="step-nodes-body">
                                        {idx < nodeList.length - 1 && (
                                            <span className="large-line"></span>
                                        )}
                                        <ul className="body-nodes">
                                            {idx < nodeList.length - 1 && idx > 0 && (
                                                <Checkbox
                                                    checked={item.checkAll}
                                                    disabled={item.disabled}
                                                    onChange={value =>
                                                        handleCheckAllChange(value, item)
                                                    }
                                                >
                                                    全选
                                                </Checkbox>
                                            )}
                                            {item &&
                                            item.personList &&
                                            item.personList.length > 0 ? (
                                                <Nodes
                                                    isOneSelect={isOneSelect}
                                                    changeUser={changeUser}
                                                    node={item}
                                                />
                                            ) : (
                                                <span className="empty-node">
                                                    <span>
                                                        {idx !== 0 && idx !== nodeList.length - 1
                                                            ? "当前审核节点无审核人！"
                                                            : ""}
                                                    </span>
                                                </span>
                                            )}
                                        </ul>
                                    </div>
                                </li>
                            );
                        })}
                    </ul>
                </div>
            )}
        </div>
    );
};

let hasMore = false;
function Nodes(props) {
    const { node, isOneSelect, changeUser } = props;
    const [expand, setExpand] = useState(true);
    const nodeRef = useRef(null);

    useLayoutEffect(() => {
        if (nodeRef.current.clientHeight > 80) {
            hasMore = true;
            nodeRef.current.style.cssText += `height: 80px; overflow: hidden`;
            setExpand(false);
        } else {
            hasMore = false;
        }
    }, []);

    useEffect(() => {
        nodeRef.current.style.cssText += `height: ${expand ? "auto" : "80px"}; overflow: ${
            expand ? "auto" : "hidden"
        }`;
    }, [expand]);

    return (
        <>
            <span className="nodes-item" ref={nodeRef}>
                {isOneSelect ? (
                    <>
                        <Checkbox.Group
                            onChange={value => changeUser(value, node)}
                            value={node.selectUser}
                        >
                            {node.personList.map((itm, i) => {
                                return (
                                    <Checkbox disabled={node.disabled} key={i} value={itm.userName}>
                                        {itm.userName}
                                    </Checkbox>
                                );
                            })}
                        </Checkbox.Group>
                    </>
                ) : (
                    node.personList.map((itm, i) => {
                        return (
                            <span className="items" key={i}>
                                {itm.userName}
                            </span>
                        );
                    })
                )}
            </span>
            {hasMore && (
                <div className="show-more" onClick={() => setExpand(isExpan => !isExpan)}>
                    {expand ? "折叠" : "展开"}
                </div>
            )}
        </>
    );
}

Nodes.propTypes = {
    node: PropTypes.object,
    isOneSelect: PropTypes.bool,
    changeUser: PropTypes.func,
};

WorkflowStep.propTypes = {
    isOneSelect: PropTypes.bool,
    noPass: PropTypes.bool,
    nodeList: PropTypes.array,
    handleCheckAllChange: PropTypes.func,
    changeUser: PropTypes.func,
};

export default WorkflowStep;
